The books array is mapped and pushed into the html. But the error says deleteThisBook() is not defined

function loadData(){
    var output = document.querySelector(".output")
    output.innerHTML = `${books
      .map(function (book){
      return `
           <ul class="list-group list-group-flush">
              <li class="list-group-item"><b>Title</b>: ${book.title}</li>
              <button onclick="deleteThisBook(this, ${book.title})">Delete</button>
          </ul>`
    }).join("")}`;
    
  }

  function deleteThisBook(delButton, t){
    console.log("clicked")
  }

  loadData();